
<template>
  <div class="dashboard-container">
    <el-drawer
      ref="drawer"
      size="600px"
      :title="status == 1 ? '新增' : '编辑'"
      :visible.sync="showDialog"
      :wrapper-closable="true"
      @close="close"
    >
      <div class="detial">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-row :gutter="10">
            <!-- <el-col :span="24"> -->
              <el-form-item label="昵称:" prop="username">
                <el-input
                  v-model="ruleForm.username"
                  placeholder="请输入昵称"
                />
              </el-form-item>
            <!-- </el-col> -->

            <el-form-item label="区号:" prop="area_code">
              <el-select
                v-model="ruleForm.area_code"
                style="width: 100%"
                placeholder="请选择区号"
                clearable
              >
                <el-option
                  v-for="(item, index) in codeList"
                  :key="index"
                  :label="'+' + item.area_code + item.area_name"
                  :value="item.area_code"
                />
              </el-select>
            </el-form-item>
            <el-col :span="24">
              <el-form-item label="手机号:" prop="mobile">
                <el-input
                  v-model="ruleForm.mobile"
                  placeholder="请输入手机号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="密码:" prop="password">
                <el-input
                  v-model="ruleForm.password"
                  placeholder="请输入密码"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="buttons">
        <el-button
          v-if="status == 1"
          size="mini"
          type="primary"
          style="margin-left: 20px"
          @click="addNews()"
        >
          新 增
        </el-button>
        <el-button
          v-if="status == 2"
          size="mini"
          type="primary"
          style="margin-left: 20px"
          @click="editNews()"
        >
          保 存
        </el-button>
        <el-button size="mini" type="" @click="close()"> 取消 </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { createAdmin } from '@/api/admin/index'
import { listMobileAreaCode } from '@/api/user'

export default {
  name: 'Detial',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detial: {
      require: false,
      type: Object,
      default: () => {}
    },
    countryCodeList: {
      require: false,
      type: Array,
      default: () => {}
    },
    portList: {
      require: false,
      type: Array,
      default: () => {}
    },
    listCourier: {
      require: false,
      type: Array,
      default: () => {}
    },
    status: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      codeList: [],
      time: '',
      showDialog: false,
      flightList: [],
      flightDetial: { port_sheet: {} },
      ruleForm: {
        username: '',
        area_code: '',
        mobile: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入管理员昵称', trigger: 'blur' }
        ],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible(val) {
      this.showDialog = this.visible
      if (!this.showDialog) {
        this.resetForm()
      } else {
        if (this.status === 2) {
          this.detial.flight_id = this.changeZero(this.detial.flight_id)
          Object.keys(this.ruleForm).forEach((i) => {
            this.ruleForm[i] = this.detial[i]
          })
          this.chengFlight()
          this.ruleForm.id = this.detial.id
          if (this.detial.service_time_start === 5) {
            this.time = '1'
          } else {
            this.time = '2'
          }
        }
      }
    }
  },
  mounted() {
    this.getListMobileAreaCode()
  },
  methods: {
    resetDate() {
      this.showDate = false
    },
    chengFlight() {
      this.flightList.forEach((item) => {
        if (this.ruleForm.flight_id === item.id) {
          this.flightDetial = item
        }
      })
    },
    changeZero(data) {
      if (data === 0) {
        return ''
      } else {
        return data
      }
    },
    chengeTime() {
      if (this.time === '1') {
        this.ruleForm.service_time_start = 5
        this.ruleForm.service_time_end = 7
      } else {
        this.ruleForm.service_time_start = 15
        this.ruleForm.service_time_end = 15
      }
    },
    close() {
      this.$emit('update', false)
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
      this.flightDetial = { port_sheet: {} }
    },
    addNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          createAdmin(this.ruleForm).then((res) => {
            this.$message.success('添加成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    },
    editNews() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          updateCustomsAffairs(this.ruleForm).then((res) => {
            this.$message.success('编辑成功')
            this.$emit('reload')
          })
        } else {
          return false
        }
      })
    },
    getListMobileAreaCode() {
      listMobileAreaCode().then((res) => {
        this.codeList = res.data.list
      })
    }
  }
}
</script>
<style scoped>
.detial {
  padding: 40px 40px 20px 20px;
}
.buttons {
  display: flex;
  flex-direction: row-reverse;
  padding-right: 40px;
}
</style>
